<template>
  <div>
      <baseInputText 
        v-model="newTodoText"
        placeholder="New todo"
        @keydown.enter="addTodo"
      />
      <ul v-if="todos.length">
        <todoListItem 
          v-for="todo in todos"
          :key="todo.id"
          :todo="todo"
          @remove="removeTodo"
        />
      </ul>
      <p v-else>
        添加一个新条目
      </p>
  </div>
</template>

<script>
import baseInputText from './baseInputText.vue'
import todoListItem from './todoListItem.vue'

let nextTodoId = 1

export default {
    components: {
        baseInputText, todoListItem
    },
    data () {
        return {
            newTodoText: '',
            todos: [
                {
                    id: nextTodoId++,
                    text: 'vue-learning'
                },
                {
                    id: nextTodoId++,
                    text: 'xiaodongio'
                },
                {
                    id: nextTodoId++,
                    text: 'gitee.com'
                }
            ]
        }
    },
    methods: {
        addTodo () {
            console.log(typeof this.newTodoText)
            const trimmedText = this.newTodoText.trim()
            if (trimmedText) {
                this.todos.push({
                    id: nextTodoId++,
                    text: trimmedText
                })
                this.newTodoText = ''
            }
        },
        removeTodo (idToRemove) {
            this.todos = this.todos.filter(todo => {
                return todo.od !== idToRemove
            })
        }
    }
}
</script>
